<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <title>Dash.js settings example</title>

    <script src="../../dist/dash.all.debug.js"></script>
    <!--dash.all.min.js should be used in production over dash.all.debug.js
        Debug files are not compressed or obfuscated making the file size much larger compared with dash.all.min.js-->
    <!--<script src="../../dist/dash.all.min.js"></script>-->

    <script>
        var player;
        function init() {
            var video,
                url = "https://dash.akamaized.net/akamai/bbb_30fps/bbb_30fps.mpd";

            video = document.querySelector("video");
            player = dashjs.MediaPlayer().create();
            player.initialize(video, url, true);

            applySettings()

            player.on(dashjs.MediaPlayer.events["PLAYBACK_ENDED"], function() {
                clearInterval(eventPoller);
            });

            var eventPoller = setInterval(function() {
                var streamInfo = player.getActiveStream().getStreamInfo();
                var dashMetrics = player.getDashMetrics();
                var dashAdapter = player.getDashAdapter();

                if (dashMetrics && streamInfo) {
                    const periodIdx = streamInfo.index;
                    var repSwitch = dashMetrics.getCurrentRepresentationSwitch('video', true);
                    var bufferLevel = dashMetrics.getCurrentBufferLevel('video', true);
                    var bitrate = repSwitch ? Math.round(dashAdapter.getBandwidthForRepresentation(repSwitch.to, periodIdx) / 1000) : NaN;
                    document.getElementById('currentBufferLevel').innerText = bufferLevel + " secs";
                    document.getElementById('reportedBitrate').innerText = bitrate + " Kbps";
                }
            }, 1000);
        }
    </script>

    <script class="code">
        function applySettings() {
            var stableBuffer = parseInt(document.getElementById('stableBuffer').value, 10);
            var bufferAtTopQuality = parseInt(document.getElementById('topQualityBuffer').value, 10);
            var minBitrate = parseInt(document.getElementById('minBitrate').value, 10);
            var maxBitrate = parseInt(document.getElementById('maxBitrate').value, 10);
            var limitByPortal = document.getElementById('limitByPortal').checked;

            player.updateSettings({
                'streaming': {
                    'stableBufferTime': stableBuffer,
                    'bufferTimeAtTopQualityLongForm': bufferAtTopQuality,
                    'abr': {
                        'minBitrate': {
                            'video': minBitrate
                        },
                        'maxBitrate': {
                            'video': maxBitrate
                        },
                        'limitBitrateByPortal': limitByPortal
                    }
                }
            })
        }
    </script>

    <style>
        video {
            width: 70%;
        }

        #container {
            display: inline-block;
        }

        fieldset {
            width: 70%;
        }
        fieldset > div {
            margin-top: 20px;
        }

        .description {
            font-size: 0.9em;
            color: #888888;
        }

    </style>
</head>
<body>
<div id="container">
    <div class="video-container">
        <video  data-dashjs-player autoplay controls="true">
        </video>
    </div>
    <fieldset>
        <legend>Configuration parameters</legend>
        <div>
            Max stable buffer (seconds): <input type="number" id="stableBuffer" value="20"> (Current Buffer: <span id="currentBufferLevel")>0</span> seconds)
            <div class="description">The time that the internal buffer target will be set to post startup/seeks (NOT top quality).</div>
        </div>
        <div>
            Buffer lenght at top quality (seconds): <input type="number" id="topQualityBuffer" value="20">
            <div class="description">The time that the internal buffer target will be set to once playing the top quality.</div>
        </div>
        <div>
            Max selectable bitrate (Kbps): <input type="number" id="maxBitrate" value="5000"> (Downloading bitrate: <span id="reportedBitrate")>0</span>)
            <div class="description">The maximum bitrate selectable by the ABR algorithms will choose. Use -1 for no limit.</div>
        </div>
        <div>
            Min selectable bitrate (Kbps): <input type="number" id="minBitrate" value="-1">
            <div class="description">The minimum bitrate that the ABR algorithms will choose. Use -1 for no limit.</div>
        </div>
        <div>
            Limit Bitrate By Portal Size: <input type="checkbox" id="limitByPortal">
            <div class="description">If true, the size of the video portal will limit the max chosen video resolution.</div>
        </div>
        <div>
            <button onclick="applySettings()">Apply changes</button>
        </div>
    </fieldset>
</div>
<script>
    document.addEventListener("DOMContentLoaded", function () {
        init();
    });
</script>
<script src="../highlighter.js"></script>
</body>
</html>


